<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <div class="head-city" @click="addr()">
          <span>{{ city_name }}</span>
          <img src="../assets/xjt3.png" alt="" class="head-btm" />
        </div>
        <div class="head-title">
          <img src="../assets/sousuo.png" alt="" />
          <input type="text" v-model="companyName" placeholder="请输入公司名称"/>
        </div>
        <div class="head-search">搜索</div>
      </div>
    </div>
    <div class="content" style="overflow: auto;"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="1">
      <div
        class="block"
        v-for="item in list"
        @click="goFirm(item.id)"
      >
        <div><img src="../assets/avatar.png" alt="" /></div>
        <div class="block-div">
          <p>{{ item.companyName }}</p>
          <div>
            <span>{{ item.scaleName }}</span>
            <span>{{ item.industry }}</span>
            <span>在招职位：{{ item.recruitCount }}</span>
            <img src="../assets/yjt.png" alt="" />
          </div>
        </div>
      </div>
      <div v-show="loading===true" class="load">
        <span v-show="loads===true">已经到底了</span>
        <span v-show="loads===false">加载中</span>
      </div>
    </div>

    <div class="footer">
      <div @click="go('/')">
        <img src="../assets/shouye.png" alt=""/>
        首页
      </div>

      <div @click="go('/usersFind')" v-if="status != 1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>
      <div @click="go('/companyFind')" v-if="status == 1">
        <img src="../assets/faxian.png" alt=""/>
        发现
      </div>

      <div @click="go('/recommend')" class="footer-color">
        <img src="../assets/tuijian1.png" alt=""/>
        推荐
      </div>
      <div @click="go('/usersMy')" v-if="status != 1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
      <div @click="go('/companyMy')" v-if="status == 1">
        <img src="../assets/wode.png" alt=""/>
        我的
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Popup, Picker, InfiniteScroll } from 'mint-ui'

export default {
  name: 'tuijian',
  components: { },
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
    this.getData()
  },
  mounted () {
    // mounted在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
    // 获取城市
    this.city_id = localStorage.getItem('cityId')
    this.city_name = localStorage.getItem('cityName') ? localStorage.getItem('cityName') : '大连市'
  },
  data () {
    return {
      city_id: '210200',
      city_name: '大连市',
      companyName: '',
      list: [],
      status: localStorage.status,
      pageSize: 50,
      pageNum: 0,
      loading: true,
      loads: false
    }
  },
  // methods 编写js函数
  methods: {
    loadMore () {
      console.log('loadMore.....')
      if (this.loading === false) {
        this.loading = true
        setTimeout(() => {
          this.pageNum = this.pageNum + 1

          this.getData()
          // alert("开始加载")
        }, 1500)
      }
    },
    getData () {
      let that = this
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/userIntentionJob/get/recommend/list?area=' +
          this.city_id + '&companyName=' + this.companyName,
        params: {// 参数传到后端controller里
          page: this.pageNum,
          limit: this.pageSize
        }
      }).then(({ data }) => {
        console.log(data)
        this.list = data.list

        // 判断是否是最后一页
        if (data.list.length <= that.pageSize) { // 当查询的总条数小于每页的总条数时候
          that.loading = true// true是不显示
          that.loads = true
        } else {
          // 可以继续上拉更新
          that.loading = false// false是显示
          that.loads = false
        }
      })
    },
    go (r) {
      this.$router.push(r)
    },
    goFirm (id) {
      console.log(id, "1---------------")
      this.$router.push({name: 'companyFirm', params: {companyId: id, jumpPath: 'recommend'}})
    },
    addr () {
      this.$router.push('/addr')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 46px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-btm {
  width: 10px;
}
.head-city {
  font-size: 12px;
  padding-right: 20px;
}
.head-city img {
  margin-left: 5px;
}
.head-title {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 26px;
}
.head-title img {
  width: 14px;
  margin-right: 5px;
}
.head-title input {
  border: 0;
  flex: 1;
  outline: none;
  font-size: 12px;
}
::-webkit-input-placeholder {
  font-weight: 100;
} /* 使用webkit内核的浏览器 */
:-moz-placeholder {
  font-weight: 100;
} /* Firefox版本4-18 */
::-moz-placeholder {
  font-weight: 100;
} /* Firefox版本19+ */
:-ms-input-placeholder {
  font-weight: 100;
}
.head-search {
  padding: 0 10px 0 20px;
  font-size: 14px;
}
.con-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  border-bottom: 1px solid rgb(248, 248, 248);
}
.con-top-left {
  width: 40%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  color: #757575;
  font-size: 12px;
}
.active {
  color: #000;
  font-weight: 700;
}
.con-top-right {
  height: 100%;
  color: #757575;
  font-size: 14px;
}
.more {
  font-size: 16px;
  color: #000;
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.content {
  width: 100%;
  background: rgb(248, 248, 248);
  padding-bottom: 70px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
  top: 46px;
}
.block {
  width: 95%;
  box-sizing: border-box;
  padding: 10px;
  background: #fff;
  margin-top: 10px;
  height: 90px;
  display: flex;
  flex-flow: row;
  align-items: center;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  position: relative;
}
.block img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
}
.block-div {
  padding: 10px 15px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  justify-content: space-around;
}
.block-div span {
  margin-right: 20px;
}
.block p {
  font-size: 16px;
}
.block span {
  color: #cecece;
  font-size: 12px;
}
.block-div div {
  display: flex;
  align-items: center;
}
.block-div img {
  width: 14px;
  height: 14px;
}

.load {
  font-size: 12px;
  color: #333;
  padding: 10px 0;
  width: 100%;
  text-align: center;
}
</style>
